<template>
    <div>
        <!-- 首页内容 -->
        <el-main>
            <!-- 面包屑导航区域 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>当前位置：首页</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 最后登录时间区域 -->
            <el-card :body-style="{ padding: '0px',display: 'flex',alignItems: 'center',height: '50px' }" class="homeConTitle">
                  <div class="homeConTitle_biao"></div>
                  <div class="homeConTitle_time">最后登录时间：{{lastDate}}</div>
                  <div class="homeConTitle_ip">最后登录IP：{{lastIp}}</div>
            </el-card>
            <!-- 交易数据区域 --> 
            <el-card :body-style="{ padding: '0px',height: '160px' }">
                <div style="display:flex;height:50px;alignItems:center">
                    <div class="homeConTitle_biao"></div>
                    <div class="homeConTitle_time">交易数据</div>
                </div>
                <div class="business">
                    <div class="business_item" v-for="(v,i) in businessArr" :key="i" :style="{backgroundColor:bgColor[i]}">
                        <div class="business_item_left">
                            <div class="business_item_left_top">{{v.title}}</div>
                            <div v-if="v.num2 > 0" class="business_item_left_bottom">
                                <span>{{v.num}}</span>
                                <img src="@/assets/home/up.png">
                                <span style="color:#f06767">{{v.num2}}</span>
                            </div>
                            <div v-else-if="v.num2 < 0" class="business_item_left_bottom">
                                <span>{{v.num}}</span>
                                <img src="@/assets/home/down.png">
                                <span style="color:#00a60d">{{Math.abs(v.num2)}}</span>
                            </div>
                            <div v-else class="business_item_left_bottom">
                                <span>{{v.num}}</span>
                            </div>
                        </div>
                        <div class="business_item_right">
                            <img src="@/assets/home/home2.png">
                        </div>
                    </div>
                </div>
            </el-card>
            <!-- 代理数据区域 --> 
            <el-card :body-style="{ padding: '0px',height: '160px' }">
                <div style="display:flex;height:50px;alignItems:center">
                    <div class="homeConTitle_biao"></div>
                    <div class="homeConTitle_time">代理数据</div>
                </div>
                <div class="business">
                    <div class="business_item" v-for="(v,i) in agentArr" :key="i" :style="{backgroundColor:bgColor2[i]}">
                        <div class="business_item_left">
                            <div class="business_item_left_top">{{v.title}}</div>
                            <div v-if="v.num2 > 0" class="business_item_left_bottom">
                                <span>{{v.num}}</span>
                                <img src="@/assets/home/up.png">
                                <span style="color:#f06767">{{v.num2}}</span>
                            </div>
                            <div v-else-if="v.num2 < 0" class="business_item_left_bottom">
                                <span>{{v.num}}</span>
                                <img src="@/assets/home/down.png">
                                <span style="color:#00a60d">{{Math.abs(v.num2)}}</span>
                            </div>
                            <div v-else class="business_item_left_bottom">
                                <span>{{v.num}}</span>
                            </div>
                        </div>
                        <div class="business_item_right">
                            <img src="@/assets/home/useradd.png">
                        </div>
                    </div>
                </div>
            </el-card>
            <!-- 今日数据区域 --> 
            <el-card :body-style="{ padding: '0px',height: '160px' }">
                <div style="display:flex;height:50px;alignItems:center">
                    <div class="homeConTitle_biao"></div>
                    <div class="homeConTitle_time">今日数据</div>
                </div>
                <div class="business">
                    <div v-for="(v,i) in todayData" :key="i" class="todayItem">
                        {{v.title}}<br/>{{v.num}}
                    </div>
                </div>
            </el-card>
            <!-- 昨日数据区域 --> 
            <el-card :body-style="{ padding: '0px',height: '160px' }">
                <div style="display:flex;height:50px;alignItems:center">
                    <div class="homeConTitle_biao"></div>
                    <div class="homeConTitle_time">昨日数据</div>
                </div>
                <div class="business">
                    <div v-for="(v,i) in yesterday" :key="i" class="todayItem">
                        {{v.title}}<br/>{{v.num}}
                    </div>
                </div>
            </el-card>
            <!-- 订单下单统计区域 --> 
            <el-card :body-style="{ padding: '10px 0' }">
                <div style="display:flex;height:50px;alignItems:center;padding:0 10px">
                    <div class="homeConTitle_time" style="margin-right:180px">订单下单统计</div>
                    <div class="dateSel">
                      <span class="demonstration">从</span>
                      <el-date-picker
                        v-model="value1"
                        type="date"
                        @change="xuanding"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                      </el-date-picker>
                    </div>
                    <div class="dateSel">
                      <span class="demonstration">到</span>
                      <el-date-picker
                        v-model="value2"
                        type="date"
                        @change="xuanding"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                      </el-date-picker>
                    </div>
                    <el-radio-group v-model="tabPosition" fill="#0bb976" @change="selDay" style="margin-left: 60px">
                      <el-radio-button label="first">昨日</el-radio-button>
                      <el-radio-button label="second">今日</el-radio-button>
                      <el-radio-button label="third">最近7日</el-radio-button>
                    </el-radio-group>
                </div>
                <!-- 图表 -->
                <div id="main" style="width: 100%;height:600px;"></div>
            </el-card>
        </el-main>
    </div>
</template>

<script>
// 导入 echarts
var echarts = require('echarts');
export default {
    data() {
        return {
            businessArr:[],
            value1:'',//开始日期
            value2:'',//结束日期
            tabPosition:'second',
            myChart: null,
            source: [],
            bgColor:['#2AD199','#A9E8B1','#76B69F','#D6B4B6','#6A8DAE'],
            bgColor2:['#3DB1A6','#F5A356','#434E52','#F47678','#F47678'],
            lastDate:'',
            lastIp:'',
            agentArr:[],
            todayData:[],
            yesterday:[]
        }
    },
    methods:{
      selDay(){
          if( this.tabPosition == 'first' ){
              var day1 = new Date();
              day1.setTime(day1.getTime()-24*60*60*1000);
              var s1 = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-" + day1.getDate();
              this.value1 = s1;this.value2 = s1;
              this.getChartData()
          }
          if( this.tabPosition == 'second' ){
              var date = new Date();
              this.value1 = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
              this.value2 = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
              this.getChartData()
          }
          if( this.tabPosition == 'third' ){
              var day1 = new Date();
              var s2 = day1.getFullYear() + '-' + (day1.getMonth()+1) + '-' + day1.getDate();
              day1.setTime(day1.getTime()-24*60*60*1000*7);
              var s1 = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-" + day1.getDate();
              this.value1 = s1;this.value2 = s2;
              this.getChartData()
          }
      },
      showChart(){
          this.myChart = echarts.init(document.getElementById("main"));
          var option = {
              legend: {},
              tooltip: {},
              dataset: {
                  source: this.source
              },
              xAxis: {type: 'category'},
              yAxis: {},
              series: [
                  {type: 'bar',barGap: 0,itemStyle:{
                      color:'#00bb7a'
                  }},
                  {type: 'bar',barGap: 0,itemStyle:{
                      color:'#f4b1e7'
                  }}
              ],
              legend: {
                  right: 300
              }
          }
          this.myChart.setOption(option);
      },
      getChartData(){
          this.$http.post('userChartData',{start:this.value1,end:this.value2}).then((data)=>{
              if(data.data.success){
                  var num = data.data.msg.length;
                  if ( num>1 ) this.$message({
                  	showClose: true,
                  	message: data.data.msg,
                  	type: 'success',
                  	offset:'65',
                  	duration:1000
                  });
                  this.source = data.data.data.chartData;
                  this.showChart()
              }else{
                  this.$message.error(data.data.msg)
              }
          })
      },
      getUserHomeData(){
          this.$http.get('userhome').then((data)=>{
              if(data.data.success){
                  this.businessArr = data.data.data.businessArr;
                  this.agentArr = data.data.data.agentArr;
                  this.todayData = data.data.data.todayData;
                  this.yesterday = data.data.data.yesterday;
                  this.lastDate = data.data.data.lastDate;
                  this.lastIp = data.data.data.lastIp;
              }else{
                  this.$message.error(data.data.msg)
              }
          })
      },
      xuanding(){
          this.getChartData()
      }
    },
    beforeDestroy() { //销毁实例
      if(!this.myChart){  
        return;
      }
      this.myChart.dispose()
      this.myChart = null
    },
    created(){
        var date = new Date();
        this.value1 = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
        this.value2 = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
        this.getChartData();
        this.getUserHomeData();
    }
}
</script>

<style scoped>
.el-breadcrumb{
      height: 40px;
      font-size: 14px;
      color: #808185;
      line-height: 40px;
      padding-left: 20px;
      background-color: #fff;
    }
    .el-card{
      margin: 10px 16px;
    }
    .el-main{
      padding: 0;
    }
    /* <!-- 最后登录时间区域 --> */
    .homeConTitle_biao{
        width: 6px;
        height: 20px;
        background-color: #2ad199;
        margin: 0 10px;
    }
    .homeConTitle_time{
      font-size: 14px;
    }
    .homeConTitle_ip{
      font-size: 14px;
      margin: 0 240px 0 40px;
    }
    .homeConTitle_order{
        font-size: 14px;
        margin-left: 34px;
    }
    .homeConTitle_order>span{
        vertical-align: middle;
    }
    .el-select{
        width: 105px;
        margin-left: 12px;
        vertical-align: middle;
    }
    .homeConTitle_chaxun{
        margin-left: 50px;
    }
    /* <!-- 交易数据区域 -->  */
    .business{
      display: flex;
      justify-content: space-around;
    }
    .business_item{
      width: 280px;
      height: 82px;
      border-radius: 6px;
      padding: 16px 24px 0 20px;
    }
    .business_item_left{
      float: left;
    }
    .business_item_right{
      float: right;
    }
    .business_item_right img{
      width: 57px;
      height: 57px;
    }
    .business_item_left_top{
      font-size: 16px;
      color: #fff;
      margin-bottom: 16px;
    }
    .business_item_left_bottom img{
      width: 18px;
      height: 24px;
      vertical-align: middle;
    }
    .business_item_left_bottom span:nth-child(1){
      font-size: 22px;
      color: #fff;
      vertical-align: middle;
      margin-right: 10px;
    }
    .business_item_left_bottom span:nth-child(3){
      font-size: 12px;
      color: #fff;
      vertical-align: top;
      background-color: #73eef9;
      display: inline-block;
      width: 50px;
      text-align: center;
    }
/* <!-- 今日数据区域 -->  */
    .todayItem{
        padding: 20px 0 40px;
        font-size: 22px;
        text-align: center;
    }
    /* <!-- 订单下单统计区域 -->  */
    .dateSel{
      font-size: 12px;
    }
    .demonstration{
      margin: 0 20px;
    }
</style>